<script setup lang="ts">
import { ref, reactive, defineAsyncComponent, inject, watch } from "vue";
import { eventBus } from "@/views/all/visual/template/utils/eventBus";

const emits = defineEmits(["generalEvent"]);
const imgArr = [];
const activeName = ref(["all"]);
// let compArr = ["all", "camera", "sensor", "temperature"];
const isVisualEditer = inject("isVisualEditer", false);
const middleComp = inject("middleComp", ref([]));

const props = withDefaults(
  defineProps<{
    propValue?: {
      peopleUrl: string;
      callinUrl: string;
    };
  }>(),
  {
    propValue: () => ({
      peopleUrl: "",
      callinUrl: ""
    })
  }
);
let compArr = ["all", "camera", "people", "sensor", "temperature", "callin"];
let compMap = {};
compArr.forEach(item => {
  compMap[item] = [];
});
let compLabel = {
  all: "全部",
  camera: "监控摄像",
  people: "双击跳转至人员定位系统",
  sensor: "消防传感器",
  temperature: "温湿度",
  callin: "双击跳转至CALL IN系统"
};
for (let i = 0; i < compArr.length; i++) {
  let comp = defineAsyncComponent(() => import(`../../assets/filter/${compArr[i]}.svg?component`));
  let val = {
    comp,
    name: compArr[i]
  };
  imgArr.push(val);
}
let timer = null;
const generalEvent = item => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    if (activeName.value.includes("all") && item.name === "all") {
      activeName.value = [];
      compMap["all"].forEach(id => {
        changeStyle("display", "none", id);
      });
    } else if (!activeName.value.includes(item.name)) {
      if (item.name === "all") {
        activeName.value = ["all"];
        compMap["all"].forEach(id => {
          changeStyle("display", "block", id);
        });
      } else {
        activeName.value.push(item.name);
        if (activeName.value.length === 5) {
          activeName.value = ["all"];
          compMap["all"].forEach(id => {
            changeStyle("display", "block", id);
          });
        } else {
          if (activeName.value.includes("all")) {
            activeName.value = activeName.value.filter(el => el !== "all");
            compMap["all"].forEach(id => {
              changeStyle("display", "none", id);
            });
          }
          compMap[item.name].forEach(id => {
            changeStyle("display", "block", id);
          });
        }
      }

      // compMap["all"].forEach(id => {
      //   changeStyle("display", "none", id);
      // });
      compMap[item.name].forEach(id => {
        changeStyle("display", "block", id);
      });
    } else if (activeName.value.includes(item.name) && item.name !== "all") {
      activeName.value = activeName.value.filter(el => el !== item.name);
      compMap[item.name].forEach(id => {
        changeStyle("display", "none", id);
      });
    }
    console.log("generalEvent", item.name);
    // emits("generalEvent", { type: "compFilter", compEmitData: activeName.value });
  }, 300);
};
const dbclickHandle = item => {
  if (timer) {
    clearTimeout(timer);
  }
  if (isVisualEditer) return;

  const peopleUrl = props.propValue.peopleUrl ? props.propValue.peopleUrl : "http://10.110.207.247:8180/localsense/#/index/home";
  const callinUrl = props.propValue.callinUrl ? props.propValue.callinUrl : "http://10.111.210.40/#/workplace";
  if (item.name === "people" && peopleUrl) {
    window.open(peopleUrl, "_blank");
  }
  if (item.name === "callin" && callinUrl) {
    window.open(callinUrl, "_blank");
  }
};
watch(
  middleComp.value,
  newVal => {
    if (newVal) {
      newVal.forEach(data => {
        if (!data) return;
        const { item } = data;
        if (!item) return;
        const { propValue, id } = item;
        if (!propValue) return;
        const { type } = propValue;
        if (!type) return;
        if (compMap[type]) {
          compMap["all"].push(id);
          compMap[type].push(id);
        }
      });
    }
  },
  { immediate: true }
);
function changeStyle(styleName, value, compId = null) {
  eventBus.emit("changeStyle", { styleName, value, compId });
}
</script>

<template>
  <div class="max[100%] h-[40px] flex flex-wrap justify-around items-center bg-white rounded-[5px] filter-menu">
    <div
      v-for="(item, index) in imgArr"
      :key="item.name"
      class="w-[32px] h-[32px] cursor-pointer grow-0 shrink-0 flex justify-center items-center mr-1"
      :class="{ 'mr-[32px]': index === 0 }"
      @click="generalEvent(item)"
      @dblclick="dbclickHandle(item)"
    >
      <px-tooltip :content="compLabel[item.name]" placement="top" effect="dark">
        <component
          :is="item.comp"
          class="w-[32px] h-[32px] hover:text-[#3B82F6] active:text-[#3B82F6]"
          :class="{ 'text-[#3B82F6]': activeName.includes(item.name), 'text-[#C6C6C6]': !activeName.includes(item.name) }"
        />
      </px-tooltip>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.filter-menu {
  position: relative;
  height: 40px !important;
  padding: 0 10px;

  &:first-child::before {
    position: absolute;
    left: 62px;
    width: 1px;
    height: 28px;
    content: "";
    background: rgb(0 0 0 / 10%);
  }

  svg {
    outline: none;
  }
}
</style>
